import 'package:flutter/gestures.dart';
import 'package:safetymonitor/app/core/core.dart';

///DataTable - 数据表格
class DataTables extends StatefulWidget {
  const DataTables(
    this.tableData, {
    required this.onActionClick,
    super.key,
    this.onOverScroll,
  });

  final List<List<String>> tableData;
  final void Function(ScrollNotification noti)? onOverScroll;
  final void Function(String row) onActionClick;

  @override
  State<DataTables> createState() => _DataTablesState();
}

class _DataTablesState extends State<DataTables> {
  // ScrollController _scrollController = ScrollController();
  // @override
  // void dispose() {
  //  _scrollController.dispose();
  //   super.dispose();
  // }
  DataTable _getDataTable() {
    /// 数据表格
    return DataTable(
      ///另一种生成分隔符颜色的简单方法是使用Datatable的horizontalInside of border属性
      border: TableBorder(
        horizontalInside: BorderSide(
          width: 1.w,
          color: const Color(0xFFEEF0F7),
        ),
      ),

      /// 标题行 DataColumn 集合
      columns: _buildColumns(),

      /// 数据行 DataRow 集合
      rows: _buildRows(),

      /// 标题行的高度
      headingRowHeight: 49.w,

      /// 标题行的文本样式
      headingTextStyle: TextStyle(
        color: const Color(
          0xFFC7CEE5,
        ),
        fontWeight: FontWeight.w500,
        fontSize: 14.sp,
      ),

      /// 数据行的高度
      dataRowMinHeight: 49.w,
      dataRowMaxHeight: 49.w,

      /// 数据行的文本样式
      dataTextStyle: const TextStyle(color: Colors.black),

      /// 数据行的背景颜色
      // dataRowColor: MaterialStateProperty.resolveWith((states) {
      //   if (states.contains(MaterialState.selected)) {
      //     return Colors.green;
      //
      //     /// 选中状态的颜色
      //   }
      //   return Colors.red;
      //
      //   /// 其他状态的颜色
      // }),

      /// 列之间的间距
      columnSpacing: 15.w,

      /// 左侧边缘与第一列之间的间距，以及右侧边缘与最后一列之间的间距
      horizontalMargin: 10.w,

      /// 分隔线的宽度
      dividerThickness: 0,

      /// 最后一行数据的下面是否要显示分隔线
      showBottomBorder: false,

      /// 是否在每行的左侧显示复选框
      showCheckboxColumn: false,

      /// 复选框水平方向上的外边距
      // checkboxHorizontalMargin: 10,

      /// 当前排序的列索引
      // sortColumnIndex: _sortColumnIndex,

      /// 当前排序的方向是否是正向排序
      sortAscending: true,

      /// 点击标题行中的全选按钮时的回调
      /// 定义这个就要自己写逻辑，不定义这个则走默认的全选逻辑
      /*
      onSelectAll: (value) {

      },
      */
    );
  }

  List<DataColumn> _buildColumns() {
    return widget.tableData[0]
        .map((title) => DataColumn(
              /// 需要显示的内容
              label: Text(
                title,
              ),

              /// tooltip
              tooltip: title,

              /// 是否右对齐
              numeric: false,

              /// 点击标题，触发排序操作时的回调
              // onSort: (int columnIndex, bool ascending) {
              //   /// columnIndex - 排序的列的索引
              //   /// ascending - 是否正向排序
              //   // log('onSort, columnIndex:$columnIndex, ascending:$ascending');
              //   if (columnIndex != 0 && columnIndex != 2) {
              //     return;
              //   }
              //
              //   // setState(() {
              //   //   _sortColumnIndex = columnIndex;
              //   //   _sortAscending = ascending;
              //   //
              //   //   /// 对数据源排序
              //   //   tableData.sort((p1, p2) {
              //   //     int compareA = 0;
              //   //     int compareB = 0;
              //   //     switch (_sortColumnIndex) {
              //   //       case 0:
              //   //         compareA = p1.id;
              //   //         compareB = p2.id;
              //   //         break;
              //   //       case 2:
              //   //         compareA = p1.x1;
              //   //         compareB = p2.x1;
              //   //         break;
              //   //     }
              //   //     if (_sortAscending) {
              //   //       return compareA.compareTo(compareB);
              //   //     }
              //   //     return compareB.compareTo(compareA);
              //   //   });
              //   // });
              // },
            ))
        .toList();

    /// 标题行 DataColumn 集合
  }

  List<DataRow> _buildRows() {
    final dataRows = <DataRow>[];
    for (var i = 1; i < widget.tableData.length; i++) {
      final cells = widget.tableData[i].map((cell) => _getDataCell(cell, widget.tableData[i])).toList();

      /// 单元格
      dataRows.add(DataRow(
        cells: cells,

        /// 当前数据行是否是选中状态
        // selected: cells.isSelected,

        /// 当前数据行的选中状态发生变化时的回调
        // onSelectChanged: (isSelected) {
        //   setState(() {
        //     row.isSelected = isSelected!;
        //   });
        // },
      ));

      /// 数据行 DataRow 集合
    }
    return dataRows;
  }

  DataCell _getDataCell(String cell, List<String> row) {
    /// 单元格
    return DataCell(
        Text(
          cell,
          style: TextStyle(
            color: const Color(0xFF3D4769),
            fontSize: 14.sp,
            fontWeight: FontWeight.w400,
          ),
        ),

        /// 是否在单元格上显示编辑按钮
        showEditIcon: false,

        /// 单击事件，类似的有 onTap, onLongPress, onTapDown, onDoubleTap, onTapCancel
        onTap: () {
      widget.onActionClick(row.first);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        scrollbarTheme: ScrollbarThemeData(
          //可以通过设置主题来自定义滚动条的颜色
          thumbColor: MaterialStateProperty.all(const Color(0xFF1847E3)),
        ),
      ),
      child: Scrollbar(
        /// 滚动条的宽度
        thickness: 0,

        /// 滚动条两端的圆角半径
        radius: const Radius.circular(10),

        /// 是否显示滚动条滑块
        thumbVisibility: false,

        notificationPredicate: (noti) {
          widget.onOverScroll?.call(noti);
          if (noti is OverscrollNotification) {
            return false;
          }
          return true;
        },

        /// 是否显示滚动条轨道
        trackVisibility: false,
        child: SingleChildScrollView(
          // controller: _scrollController,
          /// 滚动方向（vertical 或 horizontal）
          /// 如果需要两个方向都滚，那么就需要用两个 SingleChildScrollView
          scrollDirection: Axis.horizontal,

          /// 内边距
          padding: EdgeInsets.zero,

          /// 用于确定什么时候触发拖动事件（我这里测试时看不出二者的区别）
          ///   start - 出现拖拽手势的时候触发拖动事件
          ///   down - 手指按下的时候触发拖动事件
          dragStartBehavior: DragStartBehavior.start,

          /// 滚动的响应方式
          ///   NeverScrollableScrollPhysics() - 禁止滚动
          ///   BouncingScrollPhysics() - 允许滚动，滚到边缘后会有类似 ios 的弹簧效果
          ///   ClampingScrollPhysics() - 允许滚动，滚到边缘后会有类似 android 的光波效果
          ///   AlwaysScrollableScrollPhysics() - 允许滚动，滚到边缘后在 ios 中会有弹簧效果，在 android 中会有光波效果
          ///   RangeMaintainingScrollPhysics() - 有 AlwaysScrollableScrollPhysics() 的效果，并且在滚动中即使内容出现了增多或减少也不会影响滚动
          // physics: const RangeMaintainingScrollPhysics(),
          physics: const BouncingScrollPhysics(),

          // DataTable 不支持滚动，需要借助 SingleChildScrollView 实现滚动
          child: Scrollbar(
            /// 滚动条的宽度
            thickness: 0,

            /// 滚动条两端的圆角半径
            radius: const Radius.circular(10),

            /// 是否显示滚动条滑块
            thumbVisibility: false,

            /// 是否显示滚动条轨道
            trackVisibility: false,
            child: SingleChildScrollView(
              padding: EdgeInsets.zero,
              dragStartBehavior: DragStartBehavior.start,
              scrollDirection: Axis.vertical,
              child: _getDataTable(),
            ),
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    // _scrollController.addListener(_scrollListener);
  }

  // void _scrollListener() {
  //   if (_scrollController.position.pixels == _scrollController.position.minScrollExtent) {
  //     // 当滚动到DataTable的左边缘时，切换到下一个页面
  //     Get.find<HomePageControl>().tabController.animateTo(1);
  //   }
  // }
}
